<template>
    <a-tabs defaultActiveKey="1"  v-model="activeKey" :animated="false" type="line" size="small" @change="change_tab">
        <a-tab-pane tab="详细信息" key="1">
            <span slot="tab">
                <a-icon type="question-circle" />
            </span>
            <div class="props">
                <ul>
                    <li>
                        <span class="values__label">政府驻地</span>
                        <span class="values"> {{$store.state.Select_Xzqh_properties.station}}</span>
                    </li>
                    <li v-show="level==1">
                        <span class="values__label" v-show="$store.state.Select_Xzqh_properties.level<=1">辖地级政区</span>
                        <span class="values">{{$store.state.Select_Xzqh_properties.prop1}}</span>
                    </li>
                        <li v-show="$store.state.Select_Xzqh_properties.level<=2">
                        <span class="values__label">辖县级政区</span>
                        <span class="values">{{$store.state.Select_Xzqh_properties.prop2}}</span>
                    </li>
                        <li v-show="$store.state.Select_Xzqh_properties.level<=3">
                        <span class="values__label">辖乡级政区</span>
                        <span class="values">{{$store.state.Select_Xzqh_properties.prop3}}</span>
                    </li>

                    <!-- <li>
                        <span class="values__label">驻地经度</span>
                        <span class="values"> {{properties.stationx}}</span>
                    </li>
                    <li>
                        <span class="values__label">驻地纬度</span>
                        <span class="values"> {{properties.stationy}}</span>
                    </li> -->
                    <li>
                        <span class="values__label">行政区划代码</span>
                        <span class="values"> {{$store.state.Select_Xzqh_properties.code}}</span>
                    </li>
                    
                    <!-- <li v-show="level <4">
                        <span class="values__label">人口数量</span>
                        <span class="values"> {{$store.state.Select_Xzqh_properties.persons}} 万人</span>
                    </li> -->
                    <li v-show="$store.state.Select_Xzqh_properties <4">
                        <span class="values__label">行政区域面积</span>
                        <span class="values"> {{$store.state.Select_Xzqh_properties.area}} 平方千米</span>
                    </li>
                    
                    <li v-show="$store.state.Select_Xzqh_properties <4">
                        <span class="values__label">电话区号</span>
                        <span class="values">{{$store.state.Select_Xzqh_properties.phonecode}}  </span>
                    </li>
                    
                    <li v-show="$store.state.Select_Xzqh_properties <4">
                        <span class="values__label">邮编编码</span>
                        <span class="values"> {{$store.state.Select_Xzqh_properties.postalcode}}</span>
                    </li>
                    <li>
                        <span class="values__label">设立年份
                            <a-tooltip placement="bottom">
                                <template slot="title">
                                    <span>设立年份或变更年份</span>
                                </template>
                                <a-icon type="question-circle" style="width: 32px;height: 32px;"/>
                            </a-tooltip>
                        </span>
                        <span class="values"> {{$store.state.Select_Xzqh_properties.setyear}}</span>
                    </li>
                </ul>
            </div>
        </a-tab-pane>
        <!-- <a-tab-pane tab="图表" key="2" forceRender>
            <a-select v-model="propN" style="width: 220px;margin-left: 30px;" @change="Change_select" >
                <a-select-option value="人口">人口</a-select-option>
            </a-select>
            <a-tabs defaultActiveKey="3"  v-model="activeKeyTB" :animated="false" type="line" size="small" @change="change_tab2">
                <a-tab-pane tab="同级变化" key="3">
                    <div id="chatrdemoTB" style=" width100%;height:300px;"></div>
                </a-tab-pane>
                <a-tab-pane tab="同比变化" key="4" forceRender>
                    <div id="chatrdemoHB" style=" width:400px;height:300px;"></div>
                </a-tab-pane>
            </a-tabs>
        </a-tab-pane> -->
    </a-tabs>
</template>
<script>
    export default {
        data() {
            return {
                // regionid:150000000,
                //properties:{},//行政区划属性
                activeKey:"1",//详细信息 与 图表   的标签
                activeKeyTB:"3",//同级变化 与同比变化  的标签

                properties_all_years:[],
                years:[],
                codes:[],
                names:[],
                all_station_Persons:[],
                
                
                active_year:'',
                myChartTB:null,
                myChartHB:null,
                propN:'人口',
                propName:'persons',
                level:1,
            }
        },
        mounted() {
            //年份改变此处也会触发
            //this.myChartTB = this.$echarts.init(document.getElementById('chatrdemoTB'));
            //this.myChartHB = this.$echarts.init(document.getElementById('chatrdemoHB'));
            this.$Bus.$on('regionid_change', (regionid,level) => {
                //this.regionid=regionid;
                //this.level=level
                //this.Getprop()
                //this.addMapChart();
                //this.addMapChartTH();
            })
            //charts
            this.$Bus.$on('get_station_codes_end', (codes,names) => {
                this.codes=codes;
                this.names=names;
                this.get_station_Persons(codes,names);
            })
        },
        // watch:{
        //     '$store.state.Select_Year':(_new,_old)=>{
        //     //刷新数据
        //     console.log("select_year",_new,_old)
        //     },
        // },
        methods: {
            addMapChart(){
                if(this.activeKey-0==2){//去渲染柱状图
                    this.$Bus.$emit('get_station_codes')
                }
                else{ //清除图上的标志
                    this.$Bus.$emit('clear_station_chart')
                }
            },
            addMapChartTH(){
                if(this.activeKey-0==2){
                    if(this.activeKeyTB==3){
                        console.log(3);
                    }
                    else{
                        this.addMapChartH();
                    }
                }
            },
            GetpropByYear(code,year){
                return new Promise((resolve ) => {
                    this.GetpropFunc(code,year)
                    .then(data=>{
                        if(data.status==true && data.result.length >= 0){
                                resolve(data.result[0]);
                            }
                            else{
                                resolve(false)
                            }
                    });
                });
            },
            
            showModal() {
                this.modal1 = true;
                let {name,code,station,stationx,stationy,persons,area,areacode,postalcode,year}=this.xzqdata
                let formValidate={name,code,station,stationx,stationy,persons,area,areacode,postalcode,year}
                this.showinfowindow=false
                Bus.$emit('infowindoweditshow',formValidate)
                
            },
            GetYears() {
                //let years=[];
                //this.propertiesAll.forEach(element => {
                 //   years.push(element.year)
               // });
                //this.years=years;
                //Bus.$emit('year_push',years)
               // this.get_station_Persons(this.codes);

            },
            Getproperties(year){
                this.ClearMaker();
                let propertiesA=this.propertiesAll.filter((el)=>{
                    return el.year==year
                })
                if(propertiesA.length>0){
                    this.properties=propertiesA[0];
                    this.AddMaker();
                }
                else{
                    this.properties={};
                }
            },
            GetPersons(year){
                let propertiesA=this.propertiesAll.filter((el)=>{
                    return el.year==year
                })
                if(propertiesA.length>0){
                    return propertiesA[0][this.propName]
                }
                else{
                    return 0
                }
            },
            AddMaker(){
                Bus.$emit('add_station_marker',this.properties.stationx,this.properties.stationy) 
            },
            ClearMaker(){
                Bus.$emit('clear_station_marker')
            },
            changeOption(vale){
                let wa=this.alldatas.find((ele)=>{
                    return ele.year==vale
                })
                this.xzqdata = wa;
                this.$forceUpdate()
            },
            change_tab(activeKey){
               this.addMapChart();
               //当==2时取消鼠标的hover
               if(activeKey==2){
                   Bus.$emit('featrue_over',false)
               }
               else{
                   Bus.$emit('featrue_over',true)
               }
            },
            change_tab2(activeKey){
               this.addMapChartTH();
            },
            
            GetMaxPersons(props){
                let max=0.0;
                let min=0.0;
                let persons=[]
                props.forEach((prop)=>{
                    if(prop ){
                        persons.push(prop.persons);
                    }
                });
                persons.sort((val1,val2)=>{
                    return val1-val2;
                })
                return [persons[0],persons[persons.length-1]]
            },
            get_station_Persons(){
                if(this.activeKey==2){//双保险
                    
                }
                else{
                    return;
                }
                let PromiseAll=[]
                this.codes.forEach((code)=>{
                    PromiseAll.push(this.GetpropByYear(code,this.active_year));
                });
                Promise.all(PromiseAll)
                .then(datas=>{
                    this.all_station_Persons=datas;
                    Bus.$emit('add_station_chart',datas)
                    this.addMapChartT();
                })
            },
            
            Change_select(value){
                
                let OldpropName= this.propName
                if(this.propN=="人口"){
                    this.propName="persons"
                }
                else{
                    this.propName="area"
                }
                Bus.$emit('change_propName',this.propName)
                
                if(OldpropName !=this.propName){
                    //更新所有的表格。。。
                    this.addMapChartTH();
                    this.addMapChartT();
                    Bus.$emit('add_station_chart',this.all_station_Persons)

                }
            },
            addMapChartT(){
                let seriesData=[]
                let names=[]
                this.all_station_Persons.forEach((prop,index)=>{
                    if(prop){
                        seriesData.push(prop[this.propName]);
                        names.push(this.names[index])
                    }
                    else{
                        //seriesData.push(0);
                    }
                });
                let option=  {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: names,
                        axisLabel: {
                            interval:0,
                            rotate:-40
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: seriesData,
                        type: 'bar',
                        label: {
                            position: 'insideTop',
                            show: true,
                        },
                    }]
                };
                this.myChartTB.setOption(option);      
            },

            //
            addMapChartH(datas){
                let seriesData=[]
                this.years.forEach((year)=>{
                    seriesData.push(this.GetPersons(year));
                });
                let option=  {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.years
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: seriesData,
                        type: 'line',
                        label: {
                            position: 'insideTop',
                            show: true,
                        },
                    }]
                };
                this.myChartHB.setOption(option);
            },
        }
    }
</script>
<style>
.chatrdemo>div{

}
</style>